<template>
    <div class="layout-content" id="layout-content">
        <div class="layout-toolbar">
            <div class="layout-toolbar-inner">
                <div class="mod-nav clearfix">
                    <div title="" class="mod-action-wrap mod-action-wrap-a mod-action-wrap-upload clearfix" style="">
                        <div id="formFileInputCt" class="action-item">
                            <a-button-group>
                                <a-button type="primary" class="plugn-uploader-file-btn" @click="setRefUploader(false)">
                                    <a-icon type="upload" style="font-size: 18px;"/>&nbsp;&nbsp;上 传
                                </a-button>

                                <a-dropdown placement="bottomCenter" :trigger="['click']">
                                    <a-button type="primary" style="padding: 0 8px;">
                                        <i class="icon icon-trig-light-s"></i>
                                    </a-button>

                                    <a-menu slot="overlay" class="NewDropdown">
                                        <a-menu-item class="plugn-uploader-file" @click="setRefUploader(false)">
                                            <li class="menu-item">
                                                <span class="txt">
                                                    <i class="icon icon-doc-s"></i>文件
                                                </span>
                                            </li>
                                        </a-menu-item>
                                        <a-menu-item class="plugn-uploader-directory" @click="setRefUploader(true)">
                                            <li class="menu-item">
                                                <span class="txt">
                                                    <i class="icon icon-file-s"></i>文件夹
                                                </span>
                                            </li>
                                        </a-menu-item>
                                    </a-menu>
                                </a-dropdown>

                            </a-button-group>
                        </div>
                    </div>
                    <div title="" class="mod-action-wrap mod-action-wrap-a mod-action-wrap-upload clearfix" style="">
                        <div class="action-item">
                            <a-dropdown :trigger="['click']">
                                <a-menu slot="overlay" class="NewDropdown">
                                    <a-menu-item>
                                        <li class="menu-item" @click="addDirModal=true">
                                            <span class="txt">
                                                <i class="icon icon-create-s"></i>文件夹
                                            </span>
                                        </li>
                                    </a-menu-item>
                                    <a-menu-divider/>
                                    <a-menu-item>
                                        <li class="menu-item">
                                                <span class="txt">
                                                    <i class="icon icon-note-m"></i>笔记
                                                </span>
                                        </li>
                                    </a-menu-item>
                                    <a-menu-item>
                                        <li class="menu-item">
                                                <span class="txt">
                                                    <i class="icon icon-markdown-s"></i>Markdown
                                                </span>
                                        </li>
                                    </a-menu-item>
                                    <a-menu-item>
                                        <li class="menu-item">
                                                <span class="txt">
                                                    <i class="icon icon-word-s"></i>Word 文档
                                                </span>
                                        </li>
                                    </a-menu-item>
                                    <a-menu-item>
                                        <li class="menu-item">
                                                <span class="txt">
                                                    <i class="icon icon-xls-s"></i>Excel 表格
                                                </span>
                                        </li>
                                    </a-menu-item>
                                    <a-menu-item>
                                        <li class="menu-item">
                                                <span class="txt">
                                                    <i class="icon icon-ppt-s"></i>PPT 幻灯片
                                                </span>
                                        </li>
                                    </a-menu-item>
                                    <a-menu-divider/>
                                    <a-menu-item>
                                        <li class="menu-item">
                                            <span class="txt">
                                                <i class="icon icon-bt-s"></i>离线下载
                                            </span>
                                        </li>
                                    </a-menu-item>
                                </a-menu>
                                <div class="">
                                    <a-button-group>
                                        <a-button type="primary">
                                            <a-icon type="plus" style="font-size: 18px;"/>&nbsp;&nbsp;新 建
                                        </a-button>
                                        <a-button type="primary" style="padding: 0 8px;"><i
                                                class="icon icon-trig-light-s"></i></a-button>
                                    </a-button-group>
                                </div>
                            </a-dropdown>
                        </div>
                    </div>

                    <div style="display: none;">
                        <div class="mod-action-wrap mod-action-wrap-a mod-action-wrap-upload clearfix">
                            <div class="action-item">
                                <div class="action-item-con"><span class="act-txt">新建共享组</span></div>
                            </div>
                        </div>
                    </div>
                    <div id="_mod_act_bar4">
                        <div class="mod-action-wrap mod-action-wrap-c mod-action-wrap-menu clearfix"
                             style="display: none;">
                            <div class="action-item">
                                <div class="action-item-con"><i class="icon icon-download"></i><span
                                        class="act-txt">下载</span></div>
                            </div>
                            <div class="action-item">
                                <div class="action-item-con"><i class="icon icon-share"></i><span
                                        class="act-txt">分享</span></div>
                            </div>
                            <div class="action-item">
                                <div class="action-item-con"><i class="icon icon-trash"></i><span
                                        class="act-txt">删除</span></div>
                            </div>
                            <div class="action-item">
                                <div class="action-item-con"><i class="icon icon-more"></i></div>
                                <div class="mod-bubble-menu with-border">
                                    <ul class="menu-list">
                                        <li class="menu-item"><span class="txt">移动到</span></li>
                                        <li class="menu-item"><span class="txt">添加到共享组</span></li>
                                        <li class="menu-item"><span class="txt">移入保险箱</span></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div class="mod-action-wrap mod-action-wrap-c mod-action-wrap-menu clearfix"
                             style="display: none;">
                            <div class="action-item">
                                <div class="action-item-con"><i class="icon icon-download"></i><span
                                        class="act-txt">下载</span></div>
                            </div>
                            <div class="action-item">
                                <div class="action-item-con"><i class="icon icon-share"></i><span
                                        class="act-txt">分享</span></div>
                            </div>
                            <div class="action-item">
                                <div class="action-item-con"><i class="icon icon-trash"></i><span
                                        class="act-txt">删除</span></div>
                            </div>
                            <div class="action-item">
                                <div class="action-item-con"><i class="icon icon-more"></i></div>
                                <div class="mod-bubble-menu with-border">
                                    <ul class="menu-list">
                                        <li class="menu-item"><span class="txt">移动到</span></li>
                                        <li class="menu-item"><span class="txt">添加到共享组</span></li>
                                        <li class="menu-item"><span class="txt">移入保险箱</span></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div class="mod-action-wrap mod-action-wrap-c mod-action-wrap-menu clearfix"
                             style="display: none;">
                            <div class="action-item">
                                <div class="action-item-con"><i class="icon icon-download"></i><span
                                        class="act-txt">下载</span></div>
                            </div>
                            <div class="action-item">
                                <div class="action-item-con"><i class="icon icon-share"></i><span
                                        class="act-txt">分享</span></div>
                            </div>
                            <div class="action-item">
                                <div class="action-item-con"><i class="icon icon-trash"></i><span
                                        class="act-txt">删除</span></div>
                            </div>
                            <div class="action-item">
                                <div class="action-item-con"><i class="icon icon-more"></i></div>
                                <div class="mod-bubble-menu with-border">
                                    <ul class="menu-list">
                                        <li class="menu-item"><span class="txt">添加到共享组</span></li>
                                        <li class="menu-item"><span class="txt">移入保险箱</span></li>
                                        <li class="menu-item"><span class="txt">隐藏</span></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                    <MenuTopUser/>
                </div>
            </div>
        </div>

        <!--重命名-->
        <a-modal
                v-model="addDirModal"
                :closable="false"
                wrapClassName="edit_item_modal"
                :width="400"
        >
            <p class="title">重命名</p>
            <p class="input">
                <a-form :form="addDirForm">
                    <a-form-item>
                        <a-input
                                v-decorator="['name',{rules: [{ validator: this.handleNameValidate }], validateTrigger: ['change', 'blur']}]"
                                :placeholder="'请输入文件夹名称'"/>
                    </a-form-item>
                </a-form>
            </p>

            <template slot="footer">
                <a-button @click="addDirModal=false">取 消</a-button>
                <a-button htmlType="submit" type="primary" @click.stop.prevent="addItem">保 存</a-button>
            </template>
        </a-modal>

    </div>
</template>

<script>
    import ApiUrl from '../../config/api'
    import MenuTopUser from '../../components/MenuTop/User'

    export default {
        name: "top",
        components: {
            MenuTopUser,
        },
        data() {
            return {
                tempSelect: [],
                addDirForm: this.$form.createForm(this, {props: {}}),
                addDirModal: false,
            }
        },
        methods: {
            handleNameValidate(rule, value, callback) {
                value = typeof value != "undefined" ? value : '';
                const regex = new RegExp("[:*?/\\\"<>|']", 'g');
                if (value == "" || value.replace(/^\s+|\s+$/g, '') == '') {
                    callback(new Error('请输入文件夹名称'));
                } else if (regex.test(value)) {
                    callback(new Error('文件夹名称不能包含以下字符之一：:*?/"<>|\\'));
                }
                callback();
            },
            addItem() {
                this.addDirForm.validateFields((err, values) => {
                    if (!err) {
                        let dirId = typeof this.$route.params.dir_id == "undefined" ? '0' : this.$route.params.dir_id;
                        let hide = this.$message.loading('正在创建...', 0);
                        this.addDirModal = false;
                        let Url = ApiUrl.DiskApiUrl.add;
                        this.$ajax.post(Url, {folder: values.name, pdir_id: dirId}, {}).then(function (ret) {
                            let dataS = ret.data;
                            this.$message.destroy();
                            if (dataS.code == 200) {
                                this.$message.success('创建成功');
                            } else {
                                let msg = dataS.msg || '创建失败';
                                this.$message.error(msg);
                            }
                            this.$emit("refreshBatch", false);
                            setTimeout(function () {
                                this.addDirForm.setFieldsValue({
                                    name: ''
                                });
                            }.bind(this), 20)
                        }.bind(this));
                    } else {
                        // console.log('error',values);
                    }
                });
            },
            setRefUploader(isdirectory) {
                isdirectory = isdirectory === true ? true : false;
                if(document.getElementById('uploader-file-input') == null || document.getElementById('uploader-directory-input') == null) {
                    return false;
                }
                if(!isdirectory) {
                    document.getElementById('uploader-file-input').click()
                } else {
                    document.getElementById('uploader-directory-input').click()
                }
            }
        },
    }
</script>

<style scoped lang="less">
    @import "../../assets/css/right.less";
</style>
<style lang="less">
    .ant-popover.ant-popover-placement-bottomRight > .ant-popover-content > .ant-popover-arrow {
        right: 5px;
        top: -100px;
    }

    .NewDropdown {
        width: 200px;
        .menu-item {
            position: relative;
            .txt {
                display: block;
                font-size: 14px;
                color: #020202;
                height: 30px;
                line-height: 30px;
                position: relative;

                .icon {
                    display: inline-block;
                    margin-right: 20px;
                    margin-left: 10px;
                }
            }
        }
        input{
            opacity: 0;
            position: absolute;
            top: 0;
            left: 0;
            cursor: pointer;
            width: 100%;
            height: 100%;
        }

        .ant-dropdown-menu-item:hover {
            background-color: #F4F4F4;
        }
    }
</style>